<template>
	<view class="container">
		<view>
			<button type="primary" @click="addZhuiGengItem(index)">添加追更项</button>
			<u
		</view>
		<view v-for="(item,index) in zhuigengList">
			<view class="flex-row">
				<view class="flex-name">
					<input type="text" v-model="item.name"></input>
				</view>
				<view class="flex-chapter">
					<input type="text" v-model="item.chapter"></input>
				</view>
				<view class="flex-button">
					<button size="mini" type="primary" @click="countDown(index)">-</button>
				</view>
				<view class="flex-button">
					<button size="mini" type="primary" @click="add(index)">+</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				zhuigengList:[]
			}
		},
		created() {
		        this.getZhuiGengInfo();
		},
		methods: {
			//减少
			countDown(index){
				this.zhuigengList[index].chapter--;
				this.saveZhuiGengInfo();
			},
			//增加
			add(index){
				this.zhuigengList[index].chapter++;
				this.saveZhuiGengInfo();
			},
			//保存追更信息
			saveZhuiGengInfo(){
				uni.setStorageSync('zhuigengList', this.zhuigengList);
			},
			
			//查询追更信息
			getZhuiGengInfo(){
				this.zhuigengList = uni.getStorageSync('zhuigengList')||[];
			},
			//添加追更项
			addZhuiGengItem(){
				let newRow = {"name":"名称","chapter":1}
				this.zhuigengList.push(newRow);
			}
		}
	}
</script>

<style>
	.flex-row {
	    display: flex;
	    flex-direction: row;
		margin-top: 20px;
	}
	.flex-name{
	    width: 50%;
	    text-align: center;
		height: 30px;
		line-height: 30px;
	}
	.flex-chapter{
	    width: 20%;
	    text-align: center;
		height: 30px;
		line-height: 30px;
	}
	.flex-button{
	    width: 15%;
	    text-align: center;
		height: 30px;
		line-height: 30px;
	}
</style>
